import {useDrag} from "react-dnd";
import {BarChartOutlined} from "@ant-design/icons";

export interface MaterialItemProps {
    name: string
    desc: string
}

export function MaterialItem(props: MaterialItemProps) {

    const {
        name,
        desc
    } = props;

    // 拖拽
    const [_, drag] = useDrag({
        // type 是当前 drag 的元素的标识，drop 的时候根据这个来决定是否 accept
        type: name,
        item: {
            type: name
        }
    })

    return <div
        ref={drag}
        className='w-[45%] py-2 flex-col flex items-center border-dashed mt-5 border-[1px] border-[#000] cursor-move bg-white hover:bg-[#ccc] '
    >
        <div className={'flex-[1] ml-2  flex justify-center items-center h-full'}>
            <BarChartOutlined  style={{color:"skyblue",fontSize:"30px"}}/>
        </div>
        <div className={'flex-[3] mt-3 flex justify-center items-center h-full'}>
            {desc}
        </div>

    </div>
}
